<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { EventsOnce, EventsOn, EventsEmit } from '~!/runtime/runtime'
import { ElMessage } from 'element-plus'
import { useStore } from '@/store'
const store = useStore()
const code = ref('')
const router = useRouter()
function goback() {
    store.link_fail()
}
async function submit() {
    if (store.link_state == 'true') {
        let data = await window.go.main.TunStatus.Get_tun()
        ElMessage.info(data)
    } else if (store.link_state == 'false') {
        let data=await window.go.main.SetData.SettokenStr(code.value)
        console.log(data)
        if(data=='notoken'){
            ElMessage.info("token错误")
            return
        }
        store.token=code.value
        store.link_start()
    }
}
watch(() => store.link_state, (newval) => {
    if (newval == 'true') {
        router.push('/linkSuccess')
    }
},{immediate:true})
</script>

<template>
    <form @submit="submits" class="code-contain">
        <div class="flex">
            <div class="code-input"><el-input v-model="code" class="input" type="textarea"  :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入token"></el-input></div>
            <div>
                <el-button @click="submit" class="code-sub" v-if="store.link_state=='false'">链接</el-button>
                <el-button @click="goback" class="code-sub linkout" color="rgb(0,116,232)" v-else>断开</el-button>
            </div>
        </div>
    </form>
</template>

<style scoped lang="less">
@input-height: 50px;

.code-sub {
    height: @input-height;
}


.code-contain {
    width: 100%;
}

.flex {
    width: 100%;
}

.code-input {
    padding: 0 20px 0 20px;
    width: calc(100% - 90px);
    min-height: 30px;
}
</style>